import React,{Component} from 'react'
import uuid from 'uuid'
export default class Add extends Component{

  state = {
    isAdd : this.props
  }
  
  add = ()=>{
    //1.获取用户输入
    let name = this.refs.name.value
    let id = this.refs.id.value
    let description = this.refs.description.value
    let start = this.refs.start.value
    let end = this.refs.end.value

    //2.校验数据
    if(!name.trim() || !id.trim() || !description.trim() || !start.trim() || !end.trim()){
      alert('The contents of the input field cannot be empty')
      return
    }
    //3.将输入的数据维护到状态中
    let {sendCommentObj,isAdd} = this.props
    //uuid()作用:生成一个唯一的值，用于删除时作为标识使用
    //将数据传输到App.js中
    sendCommentObj({
      name,
      id:uuid(),
      description,
      start,
      end
    },!isAdd)


  }

  render(){
    let flag = this.props.isAdd
    if ( !flag ){
      return (
        <div className="col-md-12">
          <form className="form-horizontal">
            <div className="form-group">
              <label>Project Name</label>
              <input type="text" className="form-control" placeholder="Project Name" ref="name"/>
            </div>
            <div className="form-group">
              <label>Project ID</label>
              <input type="text" className="form-control" placeholder="Project ID" ref="id"/>
            </div>
            <div className="form-group">
              <label>Description</label>
              <textarea className="form-control" rows="6" placeholder="Project Description" ref="description"></textarea>
            </div>
  
            <div className="form-group">
              <label>Start Date</label>
              <input type="date" className="form-control"   ref="start" />
            </div>
            <div className="form-group">
              <label>End Date</label>
              <input type="date" className="form-control"  ref="end"/>
            </div>
            <div className="form-group text-center">
              <div >
                <button onClick={this.add} type="button" className="btn btn-primary ">Submit</button>
              </div>
            </div>
          </form>
        </div>
      )
    }else{
      return ''
    }
    

  }
}